import React, { useEffect, useState } from 'react';
import styles from './index.less';
import { Button, Form, Select, Input, Table, Space, message } from 'antd';
let { Option } = Select;
import { request } from 'umi';
import { Student, Grade, Room, Students } from '../../../utils/interface';

const Studentss: React.FC = () => {
  // 接口总数据
  let [list, setList] = useState<Student[]>([]);//分配班级的学生
  let [arr, setArr] = useState<Grade[]>([]);//所有班级
  let [room, setRoom] = useState<Room[]>([]);//所有教室
  let [lists, setLists] = useState<Student[]>([]);//未分配班级的学生
  let [data, setData] = useState<Student[]>([]);//所有学生
  useEffect(() => {
    // 所有学生接口
    request('/manger/student').then((res) => {
      setList(res.data);
    });
    // 所有班级接口
    request('/manger/grade').then((res) => {
      setArr(res.data);
    });
    // 所有教室接口
    request('/manger/room').then((res) => {
      setRoom(res.data);
    });
    // 获取所有没有分班的学生接口
    request('/manger/student/new').then(res => {
      setLists(res.data)
    })
  }, []);
  // 合并数组
  const add = [list, lists].flat();
  const a = add.map((item, index) => {
    return { ...item, key: index }
    return {
      key: index,
      grade_id: item.grade_id ? item.grade_id : '',
      grade_name: item.grade_name ? item.grade_name : '',
      room_id: item.room_id ? item.room_id : '',
      room_text: item.room_text ? item.room_text : '',
      student_id: item.student_id ? item.student_id : '',
      student_name: item.student_name ? item.student_name : '',
      student_pwd: item.student_pwd ? item.student_pwd : '',
      subject_id: item.subject_id ? item.subject_id : '',
      subject_text: item.subject_text ? item.subject_text : '',
    };
  });
  data = a;
  const columns = [
    {
      title: '姓名',
      dataIndex: 'student_name',
      key: 'student_id',
    },
    {
      title: '学号',
      dataIndex: 'student_id',
      key: 'student_id',
    },
    {
      title: '班级',
      dataIndex: 'grade_name',
      key: 'grade_id',
    },
    {
      title: '教室',
      dataIndex: 'room_text',
      key: 'room_id',
    },
    {
      title: '密码',
      dataIndex: 'student_pwd',
      key: '',
    },
    {
      title: '操作',
      key: 'student_id',
      render: (student_id: Student) => (
        <Space size="middle">
          <div
            onClick={() => {
              del(student_id.student_id);
            }}
          >
            删除
          </div>
        </Space>
      ),
    },
  ];
  // 点击删除
  function del(student_id: string) {
    request(`/manger/student/${student_id}`, {
      method: 'DELETE',
      // params: { id: student_id },
    }).then((res) => {
      if (res.code === 1) {
        message.success(res.msg);
        // 重新渲染页面所有学生接口
        request('/manger/student').then((res) => {
          setList(res.data);
        });
      } else {
        message.error(res.msg);
      }
    });
  }
  // 清空表单
  const [form] = Form.useForm();
  const onReset = () => {
    form.resetFields();
  };
  // 点击事件,点击查询
  let onFinish = (values: any) => {
    console.log(values)
    if (values.grade_name && !values.room_text) {
      if (values.student_name) {
        let a = list.filter(item => item.grade_name == values.grade_name && item.student_name.includes(values.student_name))
        setList(a)
      } else {
        let a = list.filter(item => item.grade_name == values.grade_name)
        setList(a)
      }
    }
    let b = list.filter(item => {
      if (item.student_name == values.student_name || item.grade_name == values.grade_name || item.room_text == values.room_text) {
        return item
      }
    })
    console.log(b)
    setList(b)
    // 清空表单内容
    form.resetFields();
  };
  return (
    <div className={styles.student}>
      <h2>学生管理</h2>
      <div className={styles.center}>
        <div className={styles.centers}>
          {/* 表单 */}
          <Form
            className={styles.form}
            form={form}
            onFinish={onFinish}
            name="control-hooks"
          >
            <Form.Item name="student_name">
              <Input placeholder="输入学生姓名" className={styles.input} />
            </Form.Item>
            <Form.Item name="room_text">
              <Select placeholder="请选择教室号" className={styles.select}>
                {room.map((item) => {
                  return (
                    <Option key={item.room_id} value={item.room_text}>
                      {item.room_text}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
            <Form.Item name="grade_name">
              <Select placeholder="班级名" className={styles.select}>
                {arr.map((item) => {
                  return (
                    <Option key={item.grade_id} value={item.grade_name}>
                      {item.grade_name}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
            <Form.Item className={styles.btns}>
              <Button type="primary" htmlType="submit" className={styles.b}>
                搜索
              </Button>
              <Button htmlType="button" onClick={onReset} className={styles.bb}>
                重置
              </Button>
            </Form.Item>
          </Form>
          {/* 列表数据 */}
          <Table columns={columns} dataSource={data} />
        </div>
      </div>
    </div >
  );
};

export default Studentss;
